<template>
    <div class="picchooseVue">
           <el-dialog
            title="图片素材库"
            :visible.sync="dialogVisiblePic"
            width="1000px"
            >
                <div class="box">
                    <div class="leftbox">
                        <div class="">
                            <el-button  
                            icon="el-icon-plus"
                            @click="addgrounp()"
                            >添加分组 </el-button>
                            <el-tabs 
                            @tab-click="tabpositionclick"
                            tab-position="left"
                            class="tabposition"
                             v-model="groupId"
                           >
                                <el-tab-pane 
                                :name="item.id"
                                :label="item.name"
                                v-for="item in leftList"
                                :key="item.id"
                                ></el-tab-pane>
                            </el-tabs>
                        </div>
                    </div>
                
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                           <div class="rightboxHeader">
                                <span>{{groupName}}</span>
                                <span
                                v-if="groupId!='0'"
                                >
                                    <el-button type="text" icon="el-icon-edit" @click="replaceName()">重命名</el-button>
                                </span>
                                <span 
                                v-if="groupId!='0'"
                                class="delBtn">
                                    <el-button type="text" icon="el-icon-delete" @click="delgroup()">删除</el-button>
                                </span>
                                <el-upload
                                class="right"
                                :http-request="handleUpload"
                                :show-file-list="false"
                                action
                                multiple
                                :limit="3"
                                :on-exceed="handleExceed">
                                    <el-button size="small" type="primary">批量上传</el-button>
                                </el-upload>
                            </div>
                        </div>
                        <div>
                            <el-row>
                                <el-col 
                                :span="4"
                                v-for="(item,index) of picchooseImage"
                                :key="item.id"
                                >
                                    <div class="picchoose">
                                        <el-image class="picchooseImage" :src="item.url" ></el-image>
                                        <div>
                                            <el-checkbox 
                                            v-model="item.ischeck"
                                            :disabled="item.disabled"
                                            @change="picchooseImagedisabled()"
                                            >选择</el-checkbox>
                                        </div>
                                        <div>
                                            <el-button type="text">删除</el-button>
                                        </div>
                                    </div>
                                </el-col>
                                
                            </el-row>
                        </div>
                        <div>
                            <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[12, 18, 24, 30]"
                            :page-size="pagesize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalElements">
                            </el-pagination>
                        </div>
                        <div>
                            <el-button @click="dialogVisiblePicFalse()">取消</el-button>
                            <el-button @click="dialogVisiblePicTrue()">确定</el-button>
                        </div>
                    </el-card>
                </div>
            </el-dialog>
    </div>
</template>
<script>
import {
    materialgrouppage , 
    materialgroupadd ,
    apiupload ,
    apimaterial,
    apimaterialpage ,
    apimaterialgroup , 
    apimaterialgroupDELETE} from "@/api/CommodityManagement";
export default {
    name:"picchoose",
    data(){
        return{
            dialogVisiblePic:false,
            leftList:[],
            groupId:"0",
            picchooseImage:[],
            totalElements:0,
            currentPage:1,
            pagesize:12,
            groupName:"全部分组",
        }
    },
    mounted(){
        // 左边的数据
        this.$bus.$on('getPicChoose',()=>{
            this.materialgrouppageFn();
            this.apimaterialpageFn();
        })
    },
    beforeDestroy() {
        this.$bus.$off('getPicChoose')
    },
    methods:{
        dialogVisiblePicTrue(){
            let _self = this;
            if(_self.checkNum == 1){
                for(let item of _self.picchooseImage){
                    if(item.ischeck){
                        _self.$emit("PicTrue" , item.url )
                    }
                }
                
            }else{
                let obj = [];
                for(let item of _self.picchooseImage){
                    if(item.ischeck){
                        obj.push(item.url)
                    }
                }
                _self.$emit("PicTrueList" , obj);
            }
            for(let item of _self.picchooseImage){
               item.ischeck = false;
               item.disabled = false;
            }
        },
        // 取消
        dialogVisiblePicFalse(){
            let _self = this;
             for(let item of _self.picchooseImage){
               item.ischeck = false;
               item.disabled = false;
            }
            _self.$emit("closeDialogpic")
        },
        // 删除
        delgroup(){
            let _self = this;
             _self.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            let data = {
                id:_self.groupId
            }
            apimaterialgroupDELETE(data).then(res=>{
                console.log(res);
                for(let index in _self.leftList){
                    if(_self.leftList[index].id == _self.groupId){
                      _self.groupName =   _self.leftList[index-1].name; 
                      _self.groupId = _self.leftList[index-1].id;
                      _self.apimaterialpageFn();
                    }
                }
                _self.materialgrouppageFn()
            })
        }).catch(() => {
          _self.$message({
            type: 'info',
            message: '已取消删除'
          });          
        }); 
        },
        // 重命名
        replaceName() {
        let _self = this;
        _self.$prompt('请输入分组名', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
            inputValue:_self.groupName
        }).then(({ value }) => {
            let data= {
                id: _self.groupId,
                name: value
            }
            apimaterialgroup(data).then(res=>{
                _self.groupName = value;
                _self.materialgrouppageFn()
            })
        }).catch((err) => {
            
            console.log(err)     
        });
      },
    //   分页
         handleSizeChange(val) {
        let _self = this;
        console.log(`每页 ${val} 条`);
        _self.pagesize = val;
        _self.apimaterialpageFn()
      },
    //   分页
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        let _self = this;
        _self.currentPage = val;
        _self.apimaterialpageFn();
      },
    //   点击选中
        picchooseImagedisabled(){
            let _self = this;
            let num = 0;
            for(let item of _self.picchooseImage){
                if(item.ischeck){
                    num++
                }
            }
            if(num<_self.checkNum - _self.imagesNum){
                 for(let item of _self.picchooseImage){
                    item.disabled = false
                }
            }else{
                 for(let item of _self.picchooseImage){
                    if(!item.ischeck){
                        item.disabled = true
                    }
                }
            }
        },
        // 点击分组
        tabpositionclick(){
            let _self = this;
            console.log(_self.groupId)
            for(let item of _self.leftList){
                if(item.id == _self.groupId){
                    _self.groupName = item.name;
                }
            }
            _self.apimaterialpageFn()
        },
        // 弹窗右边数据
        apimaterialpageFn(){
            let _self = this;
            let data ={
                page:_self.currentPage-1,
                size:_self.pagesize,
                groupId:_self.groupId
            }
            apimaterialpage(data).then(res=>{
                console.log(res)
                _self.picchooseImage = res.content;
                // 选中状态
                for(let index in _self.picchooseImage){
                    _self.$set(_self.picchooseImage[index],"ischeck" ,false)
                    _self.$set(_self.picchooseImage[index],"disabled" ,false)
                }
                _self.totalElements = res.totalElements;
            })
        },
        // 获取左边分组
        materialgrouppageFn(){
            let _self = this;
            materialgrouppage().then(res=>{
                console.log(res.content)
                let data = [{name:"全部分组" ,id:null}]
                _self.leftList = [...data,...res.content];
                
            })
        },
        // 控制上传次数
        handleExceed(){
            let _self = this;
            // console.log("1")
            _self.$message("最多一次性上传三个")
        },
        // 上传图片
       async handleUpload(par){
            let _self = this;
            console.log(par)
            let data = {
                "type":"1",
                "groupId":_self.groupId,
                "name":par.file.name,
                "url":""
            }
            let formardate = new FormData();
            formardate.append("file" , par.file)
           await apiupload(formardate).then(res=>{
                console.log(res)
                data.url = res.link;
                
            });
           await apimaterial(data).then(res=>{
                    console.log(res)
                    _self.apimaterialpageFn()
            })
            
        },
        // 
        // 添加分组
        addgrounp(){
            let _self = this;
            _self.$prompt('请输入分组名', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
                }).then(({ value }) => {
                    let data ={
                        name:value
                    }
                    materialgroupadd(data).then(res=>{
                        console.log(res)
                       _self.materialgrouppageFn()
                    })
                }).catch(() => {
                _self.$message({
                    type: 'info',
                    message: '取消输入'
                });       
                });
            }
        },
        props:{
            // 最多选几张
            checkNum:{
                type:Number,
                default:()=>{
                    return 4
                }
            },
            imagesNum:{
                type:Number,
                default:()=>{
                    return 0
                }
            }
        }
    }

</script>
<style lang="less">
.picchooseVue{
    .el-dialog{
        margin-top: 6vh!important;
    }
    .ProductPicture{
        width:30px;
        height: 30px;
    }
    .operationWidth{
        width: 200px;
    }
    .ProductPicture{
            width: 100px;
            height: 100px;
            border: 1px dotted #ddd;
            text-align: center;
            line-height: 100px;
            font-size: 39px;
            cursor: pointer;

    }
    .ProductPicture:hover{
        border: 1px dotted blue;
    }
    .delBtn .el-button--text{
        color: red;
    }
    .rightboxHeader>span{
        padding:0 10px;
    }
    .right{
        float: right;
    }
    .box-card{
            margin: 40px 40px 0 40px;
            width: calc(100% - 261px);
    }
    .picchoose{
        box-shadow: 0px 0px 5px 1px #ddd;
        border-radius: 4px;
        margin: 0 2px;
        padding: 5px;
        text-align: center;
    }
    .picchoose .picchooseImage{
        height: 100px;
        width: 100%;
    }
    .tabposition{
        width: 100%;
    }   
    .tabposition .el-tabs__header{
        width: 100%;
    }
    
    .delBtn{
        color: red;
    }
    .box{
        display: flex;
        
    }
    .leftbox{
        background-color: #eef1f6;
        padding: 8px 24px;
    }
    .rightbox{
     flex: 1;
    }
   .shopClass .el-select-dropdown__item{
    height: 100px;
   }

    .searchValue{
        width: 200px;
    }
    .goodsTabBtn{
       margin:20px; 
    }
    .el-button+.el-button, .el-checkbox.is-bordered+.el-checkbox.is-bordered{
        margin-left: 0;
    }
    .ruleFormProductPicture{
        width: 150px;
        height: 150px;
    }
  .picchoosedialog .el-dialog__body{
            height: 550px;
            overflow-y: scroll;
     }
     .descriptive{
        width: 500px;
        height: 100px;
     }
     .contentformitem .el-form-item__content{
        width: calc(100% - 80px);
     }
     .el-icon-check,.el-icon-close{
        color: blue;
     }
     .SpecificationAttributetext{
        padding: 20px 0;
     }
}
</style>